<template>
  <div class="me_wrapper">
    <!-- 头部logo -->
    <img src="./images/pdd_login.png" alt="LOGO_login" class="head_img" />
    <!-- 短信登录和验证码登录区域 -->
    <div class="login_area">
      <div class="sele_login_mode" ref="seleMode">
        <span @click="choieLoginMode" class="area_captcha" :class="{on:loginmode}">验证码登录</span>
        <span @click="choieLoginMode" ref="pwd" class="area_password" :class="{on:!loginmode}">密码登录</span>
      </div>
      <!-- 验证码区域 -->
      <div class="cpatcha_input" v-if="loginmode">
        <input type="text" placeholder="手机号" />
        <input type="text" placeholder="验证码" />
        <p>
          温馨提示:未注册PDD账号的手机号，登录时将自动注册，且代表同意
          <span>服务协议与隐私政策</span>
        </p>
        <span @click="getPhoneCode" ref="phonecode" v-if="time==11">获取验证码</span>
        <span ref="phonecode" v-else>{{time}}S</span>
      </div>
      <!-- 密码登录区域 -->
      <div class="password_input" v-else>
        <input type="text" placeholder="用户名/手机/邮箱" />
        <!-- 密文输入 -->
        <div v-if="!isshowpwd">
          <input type="password" placeholder="密码" v-model="pwd" />
          <img src="./images/hide.png" alt="暗文输入" @click="isShoePwd" />
        </div>
        <!-- 明文输入 -->
        <div v-else>
          <input type="text" placeholder="密码" v-model="pwd" />
          <img src="./images/show.png" alt="明文输入" @click="isShoePwd" />
        </div>
        <!-- 验证码区域 -->
        <div>
          <input type="text" placeholder="验证码" />
          <img
            class="captcha_img"
            src="http://localhost:3000/api/captcha"
            alt="验证码"
            @click.prevent="getCaptcha()"
            ref="captcha_img"
          />
        </div>
      </div>
    </div>
    <!-- 登录和返回按钮 -->
    <button class="longin_btn">登录</button>
    <button class="comeback_btn">返回</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loginmode: true, //true为密码登录
      isshowpwd: true, //false 为不显示密码
      pwd: "",
      time: 11 //验证码倒计时
    };
  },
  methods: {
    choieLoginMode() {
      this.loginmode = !this.loginmode;
    },
    isShoePwd() {
      this.isshowpwd = !this.isshowpwd;
    },
    getCaptcha() {
      this.$refs.captcha_img.src =
        "http://localhost:3000/api/captcha?timer=" + Date.now();
    },
    getPhoneCode() {
      clearInterval(t);
      var t = setInterval(() => {
        this.time--;
        if (this.time == 0) {
          this.time=11
          clearInterval(t);
        }
      }, 1000);
    }
  }
};
</script>
<style lang='scss' scoped>
.me_wrapper {
  width: 85%;
  height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-flow: column;
  align-items: center;
}
.head_img {
  width: 75%;
  margin-top: 70px;
  margin-bottom: 20px;
}

.login_area {
  .sele_login_mode {
    margin-bottom: 15px;
    color: #99989a;
    font-size: 16px;
    display: flex;
    font-weight: bold;
    .on {
      color: #923cd4;
    }
    .area_captcha {
      width: 50%;
      margin-left: 10px;
      text-align: right;
    }
    .area_password {
      width: 50%;
      margin-left: 10px;
      text-align: left;
    }
  }
  .cpatcha_input {
    position: relative;
    input {
      width: 100%;
      height: 40px;
      border: none;
      font-size: 16px;
      margin-bottom: 15px;
    }
    input::-webkit-input-placeholder {
      padding-left: 5px;
    }
    p {
      color: #99989a;
      font-size: 14px;
      > span {
        color: #e02e24;
      }
    }
    > span {
      position: absolute;
      top: 12px;
      right: 10px;
      color: #99989a;
    }
  }
  .password_input {
    > div {
      position: relative;
    }
    input {
      width: 100%;
      height: 40px;
      border: none;
      font-size: 16px;
      margin-bottom: 15px;
    }
    input::-webkit-input-placeholder {
      padding-left: 5px;
    }
    img {
      width: 7%;
      right: 20px;
    }
    .captcha_img {
      width: 50%;
    }
  }
}
.longin_btn {
  width: 100%;
  height: 40px;
  margin: 20px 0 10px 0;
  border: none;
  border-radius: 5px;
  background-color: #e02e24;
  color: whitesmoke;
}
.comeback_btn {
  width: 100%;
  height: 40px;
  border: 1px #eaeaec solid;
  border-radius: 5px;
  color: gainsboro;
  background-color: #ffffff;
}
</style>